import React from "react";
import { Button, Form, Input, Flex } from "antd";
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
// 创建组件,使用hooks
const IndexTopForm =  ({ onSearchClick, onResetFormClick, onAddClick }) => {
  const [SearchForm] = Form.useForm();
  /**
   * @date: 2024-08-27 23:23:28
   * @functionName:   js
   * @param { String } type: 弹窗类型 add 新增
   * @description:新增数据
   * @author: Forever丿顾北
   * @version: V1.0.5
  **/
  const AddData = (type) => {
    onAddClick(type)
  }
  /**
   * @date: 2024-08-27 23:28:01
   * @functionName:   js
   * @description:查询
   * @author: Forever丿顾北
   * @version: V1.0.5
  **/
  const Search = (event) => {
    // 执行按钮点击后的逻辑
    onSearchClick(event)
  }

  /**
   * @date: 2024-08-29 15:33:55
   * @description: 重置
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const ResetForm = () => {
    SearchForm.resetFields();
    // 执行按钮点击后的逻辑
    onResetFormClick()
  } 
  return (
    <div id="IndexTopForm">
      <Form labelAlign={'right'} layout={'inline'} onFinish={Search} form={SearchForm} className="form_box">
        <div className="form_left">
          <Form.Item>
            <Button type="primary" icon={<PlusOutlined />}  onClick={()=>AddData('add')}>新增</Button>
          </Form.Item>
        </div>
        <div className="form_right">
          <Form.Item name='keyword'>
            <Input placeholder="请输入商品名称..." allowClear/>
          </Form.Item>
          <Form.Item style={{marginInlineEnd: '0'}}>
            <Flex gap="small" justify="flex-end">
              <Button type="primary" htmlType="submit" iconPosition="end" icon={<SearchOutlined />}>查询</Button>
              <Button danger onClick={()=>ResetForm()}>重置</Button>
            </Flex>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
}

export default IndexTopForm;